<!--  -->
<template>
    <div class='couponQuery'>
        <el-form ref="form" :model="form" label-width="80px" size="mini">
            <div style="display:flex;">
                <el-form-item label="开通日期">
                    <el-date-picker v-model="form.validTimeBegin" type="date" placeholder="选择日期"
                        value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="至">
                    <el-date-picker v-model="form.validTimeEnd" type="date" placeholder="选择日期"
                        value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="是否导出">
                    <el-select v-model="form.isexport" placeholder="请选择">
                        <el-option label="是" value="true"></el-option>
                        <el-option label="否" value="false"></el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="关键字">
                    <el-input v-model="form.name"></el-input>
                </el-form-item> -->
            </div>
            <el-form-item>
                <div style="display:flex;">
                    <el-button size="mini" type="primary" @click="DDquery" style="margin:0 20px 0 0;">查询</el-button>
                    <!-- <el-button size="mini" type="primary">导出</el-button> -->
                    <download-excel :data="travelSupplierVoList" :fields="json_fields" worksheet="My Worksheet"
                        name="加卷数据列表">
                        <el-button type="primary" @click="aaaaa">导出</el-button>

                    </download-excel>
                </div>
            </el-form-item>
        </el-form>
        <!-- 表格 -->
        <el-table size="mini" style="width: 95%; margin: 15px" :header-cell-style="{
        color: '#fff',
        background: '#6090EC',
        fontSize: '11px',
        fontWeight: 'normal',
      }" id="tableTop" :data="travelSupplierVoList" border stripe>
            <el-table-column label="手机号" prop="customerPhone"></el-table-column>
            <el-table-column label="金额" prop="couponAmount"></el-table-column>
            <el-table-column label="开通日期" prop="validTime"></el-table-column>
            <el-table-column label="失效日期" prop="invalidTime"></el-table-column>
            <el-table-column label="是否导出" prop="isexport">
                <template slot-scope="scope">
                    <template v-if="scope.row.isexport=='true'">是</template>
                    <template v-if="scope.row.isexport=='false'">否</template>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="pageTotal">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: 'couponQuery',
        data() {
            //这里存放数据
            return {
                asasas: false,
                //导出的表格的数据
                json_fields: {
                    手机号: "customerPhone",
                    金额: "couponAmount",
                    开通日期: "validTime",
                    失效日期: "invalidTime",
                },
                form: {
                    validTimeBegin: "",
                    validTimeEnd: "",
                    isexport: "",

                },
                travelSupplierVoList: [],
                //分页
                pageSize: 10,
                currentPage: 1,
                pageTotal: 0,
            }
        },
        components: {},

        //方法集合
        methods: {

            aaaaa() {
                for (let i = 0; i < this.travelSupplierVoList.length; i++) {
                    this.travelSupplierVoList[i].isexport = 'true'
                }
                // console.log(a)
                // debugger
                console.log('1111')
                this.asasas = true
                this.$axios.getddCouponAddedit(this.travelSupplierVoList).then((res) => {
                    console.log(res)
                    if (res.code == 200) {
                        this.getddCouponAddlist()
                    }
                })
            },
            // 查询接口
            DDquery() {
                localStorage.setItem("pageSize", 10);
                localStorage.setItem("pageNum", 1);
                this.getddCouponAddlist()
            },
            // 列表数据
            getddCouponAddlist() {
                this.$axios.getddCouponAddlist(this.form).then((res) => {
                    console.log(res)
                    if (res.code == 200) {
                        this.travelSupplierVoList = res.data
                        this.pageTotal = res.total
                        this.asasas = true
                    }
                })
            },
            //分页
            handleSizeChange(value) {
                console.log("1", value);
                localStorage.setItem("pageSize", value);
                localStorage.setItem("pageNum", 1);
                this.getddCouponAddlist();
                this.pageSize = value;
            },
            handleCurrentChange(value) {
                console.log("2", value);

                localStorage.setItem("pageNum", value);
                localStorage.setItem("pageSize", this.pageSize);
                this.getddCouponAddlist();
                // orders = res.data;
            },
        },
        created() {
            this.getddCouponAddlist()
        },
        mounted() {

        }
    }
</script>
<style scoped>
    .couponQuery {
        margin: 20px;
    }

    .querybutton {
        width: 90px;
        height: 30px;
        background-color: #6090ec;
        margin-right: 15px;
    }

    #querybutton {
        float: left;
        color: #fff;
        text-indent: 1.5rem;
        line-height: 35px;
    }
</style>